<template>
  <div id="app">
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" 
        v-if="$route.meta.keepAlive"
        :key="$route.path"/>
      </keep-alive>
      <component
        :is="Component"
        v-if="!$route.meta.keepAlive"
      />
    </router-view>
    <main-tab-bar id="mainTabbar"></main-tab-bar>
    <icon></icon>
    <svg-icon></svg-icon>
  </div>
</template>

<script>
  import MainTabBar from 'content/main/MainTabBar'
  import Icon from 'content/Icon/Icon.vue'
  import SvgIcon from 'content/Icon/svg.vue'
  export default {
    name: 'App',
    components: {
      MainTabBar,
      Icon,
      SvgIcon
    }
  }
</script>

<style>
  @import "assets/css/base.css";
  #mainTabbar{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0px;
  }
</style>
